<script setup lang='ts'>
import { useTag } from '@/pages/home/component/useTag'
import { DownLink } from '@fl/components'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const { query } = useRoute()

const { getClass, getLabel } = useTag()

const data = computed(() => {
    const target: any = query?.form ?? ''
    return target ? JSON.parse(target) : {}
})

const fileList = computed(() => {
    return data.value?.fileUrl ?? []
})
</script>

<template>
    <div class="mx-auto w-1300">
        <div class="py-30 bg-white rd-8">
            <div class="mx-auto flex w-1000 justify-center items-center">
                <div class="mr-24 text-24 c-#1D2129 font-600 text-center">
                    {{ data?.noticeName }}
                </div>

                <span class="inline-block rounded-3 text-12 lh-21 text-center h21 w64"
                      :class="getClass(data?.category)"
                >{{ getLabel(data?.category)
                }}</span>
            </div>

            <div class="mt-16 text-14 text-#767676 font-400 text-center">
                发布时间：{{ data?.createTime }}
            </div>

            <div class="mx-auto my-30 bg-gray-2 h-1 w-1200" />

            <div class="mx-auto w-1000">
                <div v-html="data?.richText" />
            </div>

            <div v-if="fileList.length"
                 class="space-y-8 mx-auto mt-30 flex flex-col w-1000"
            >
                <span class="text-16">附件下载：</span>

                <DownLink :file-list="fileList" />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.custom-underline::before {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    background: rgb(59 130 246 / var(--un-text-opacity));
    width: 0; //初始宽度为0
    left: 0;
    bottom: 0;
    transition: width 0.3s;
}

.custom-underline:hover::before {
    width: 100%; //鼠标移入就变成100%
}
</style>
